<template>
	<view class="content">
		<el-button class="add" type="primary" icon="el-icon-plus" @click="addChange('add')">添加</el-button>
		<text>名称：</text>
		<el-input v-model="seranch.name" style="width: 400upx;" placeholder="输入名称"></el-input>
		<el-button @click="seranchChange" icon="el-icon-search">查询</el-button>
		<el-button @click="seranchChangeTwo" icon="el-icon-refresh">重置</el-button>
		<el-table class="table" :data="List" border style="width: 100%" v-loading="loading" height="650">
			<el-table-column prop="name" label="名称" width="200">
			</el-table-column>
			<el-table-column prop="address" label="封面图" width="150">
				<template slot-scope="scope">
					<el-image style="width: 100px; height: 250upx" :src="scope.row.img"></el-image>
				</template>
			</el-table-column>
			<el-table-column prop="content" label="下载链接">
			</el-table-column>
			<el-table-column label="上传时间" width="150">
				<template slot-scope="scope">
					{{ scope.row.createTime | formatDateTwo }}
				</template>
			</el-table-column>
			<el-table-column label="操作" width="200">
				<template slot-scope="scope">
					<el-button type="warning" @click="addChange('edit',scope.row._id)">编辑</el-button>
					<el-button type="danger" @click="remove(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<view class="block">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="pageIndex" :page-sizes="[5, 8, 16, 30]" :page-size="2"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</view>
		<el-dialog :title="type == 'add' ? '添加' : '修改'" :visible.sync="dialogVisible" width="50%">
			<el-form ref="form" :model="form" label-width="80px" :rules="rules">
				<el-form-item label="电影名称" prop="name">
					<el-input v-model="form.name" placeholder="请输入内容"></el-input>
				</el-form-item>
				<el-form-item label="电影链接" prop="content">
					<el-input v-model="form.content" type="textarea" :rows="4" placeholder="请输入内容"></el-input>
				</el-form-item>
				<el-form-item label="封面图">
					<uploadImage :imgUrl.sync="imgUrl"></uploadImage>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="close()">取 消</el-button>
				<el-button type="primary" v-if="type == 'add'" @click="add('form')" :disabled="loadingTwo" v-loading="loadingTwo">确 定
				</el-button>
				<el-button type="primary" v-if="type == 'edit'" @click="edit('form')" :disabled="loadingTwo" v-loading="loadingTwo">修 改
				</el-button>
			</span>
		</el-dialog>
	</view>
</template>

<script>
	import {
		formatDate
	} from '../../../until/index.js'
	import uploadImage from "../../../components/uploadImage/uploadImage.vue"
	export default {
		components: {
			uploadImage
		},
		data() {
			return {
				dialogVisible: false,
				form: {},
				imgUrl: "",
				total: 0,
				pageIndex: 1,
				pageSize: 5,
				seranch: {},
				loading: false,
				loadingTwo: false,
				id: '',
				type: "",
				rules: {
					name: [{
						required: true,
						message: '输入名称',
						trigger: 'blur'
					}],
					content: [{
						required: true,
						message: '输入链接',
						trigger: 'blur'
					}]
				},
				List: []
			};
		},
		filters: {
			// 时间格式化
			formatDateTwo(time) {
				var date = new Date(time);
				return formatDate(date, 'yyyy-MM-dd hh:mm');
			}
		},
		created() {
			this.get()
		},
		methods: {
			onSubmit() {
				console.log('submit!');
			},
			addChange(value,Id) {
				this.form = {},
					this.imgUrl = "",
					this.dialogVisible = true
					if(value == 'edit'){
						this.getTwo(Id)
						this.id = Id
						this.type = 'edit'
					}else if(value == 'add'){
						this.type = 'add'
					}
			},
			async getTwo(Id){
				return await uniCloud.callFunction({
					name: 'query',
					data: {
						tableName: "we-movie",
						id: Id
					}
				}).then((res) => {
					console.log(res)
					this.form = res.result.data[0]
					this.imgUrl = this.form.img
					return res.result.data
				}).catch((err) => {
					uni.showModal({
						content: `查询失败，错误信息为：${err.message}`,
						showCancel: false
					})
					console.error(err)
				})
			},
			close() {
				this.dialogVisible = false
				this.loadingTwo = false
			},
			// 获取列表
			async get() {
				this.loading = true
				return await uniCloud.callFunction({
					name: 'get',
					data: {
						tableName: 'we-movie', //要查询的表名
						filter: {
							name: this.seranch.name,
						},
						pageIndex: this.pageIndex, //第几页
						pageSize: this.pageSize //每页的记录条数
					}
				}).then((res) => {
					uni.hideLoading()
					this.List = res.result.data
					this.total = res.result.total
					this.loading = false
					return res.result.data
				}).catch((err) => {
					uni.hideLoading()
					uni.showModal({
						content: `查询失败，错误信息为：${err.message}`,
						showCancel: false
					})
					console.error(err)
				})
			},
			seranchChangeTwo() {
				this.seranch = {}
				this.get()
			},
			seranchChange() {
				this.get()
			},
			// 修改
			edit(formName){
				this.$refs[formName].validate(async (valid) => {
					if (valid) {
						uni.showLoading({
							title: '处理中...'
						})
						return await uniCloud.callFunction({
							name: 'update',
							data: {
								tableName: 'we-movie',
								id: this.id,
								name: this.form.name,
								content: this.form.content,
								img: this.imgUrl
							}
						}).then((res) => {
							uni.hideLoading()
							this.get()
							this.$notify({
								title: '提示',
								message: '修改成功',
								type: 'success'
							});
							this.dialogVisible = false
							return res.result.id
						}).catch((err) => {
							uni.hideLoading()
							uni.showModal({
								content: `添加数据失败，错误信息为：${err.message}`,
								showCancel: false
							})
							console.error(err)
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			// 新增
			add(formName) {
				this.$refs[formName].validate(async (valid) => {
					if (valid) {
						uni.showLoading({
							title: '处理中...'
						})
						return await uniCloud.callFunction({
							name: 'add',
							data: {
								tableName: 'we-movie',
								createTime: Date.now(),
								name: this.form.name,
								content: this.form.content,
								img: this.imgUrl
							}
						}).then((res) => {
							uni.hideLoading()
							this.get()
							this.$notify({
								title: '提示',
								message: '添加成功',
								type: 'success'
							});
							this.dialogVisible = false
							return res.result.id
						}).catch((err) => {
							uni.hideLoading()
							uni.showModal({
								content: `添加数据失败，错误信息为：${err.message}`,
								showCancel: false
							})
							console.error(err)
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			// 分页
			handleCurrentChange(pageIndex) {
				this.pageIndex = pageIndex
				this.get()
			},
			handleSizeChange(pageSize) {
				this.pageSize = pageSize
				this.pageIndex = 1
				this.get()
			},
			// 删除
			remove(content) {
				this.$confirm('是否删除?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(async () => {
						return await uniCloud.callFunction({
							name: 'remove',
							data: {
								tableName: 'we-movie',
								id: content._id
							}
						}).then((res) => {
							uni.hideLoading()
							this.$notify({
								title: '提示',
								message: '删除成功',
								type: 'success'
							});
							var arr = content.img
							arr = arr.split(',')
							uniCloud.deleteFile({
								fileList: arr,
								success(res) {
									console.log("删除成功", res)
								},
								fail(res) {
									console.log("删除失败", res)
								}
							})
							this.get()
							return res.result.msg
						}).catch((err) => {
							uni.hideLoading()
							uni.showModal({
								content: `删除失败，错误信息为：${err.message}`,
								showCancel: false
							})
							console.error(err)
						})
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						})
					})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 40upx;

		.add {
			margin-right: 40upx;
		}
		.table {
			margin: 40upx 0;
		}
	}
</style>
